<template>
  <div class="main">
    <!-- motion-blur -->
    <el-carousel class="banner-box">
      <el-carousel-item v-for="(item, index) in state.bannerList" :key="index">
        <div class="img-box">
          <img class="banner ob-cover" :src="item">
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import {reactive, onMounted} from 'vue'
import {getBannerList} from '@/api/index/index'

const state = reactive({
  bannerList: []
})

const getBannerListData = async () => {
  const res = await getBannerList()
  if (res.code == 200) {
    res.rows.forEach(item => {
      state.bannerList.push(item.img)
    })
  }

}

onMounted(() => {
  getBannerListData()
})

const onChange = current => {
  console.log(current);
};
</script>
<style scoped lang="scss">
:deep(.el-carousel__container) {
  height: 520px !important;
}

.main {
  .img-box {
    width: 100%;
    height: 520px;
    // background: $primary-color;

    .banner {
      height: 100%;
      width: 100%;
    }
  }
}
</style>